import { CloseOutlined } from "@ant-design/icons";
import type { DescriptionsProps } from "antd";
import { Button, Descriptions, Flex, Modal, Tag } from "antd";

import { UesrBusinessCardDataType } from "@/types/user";

type CardDrawerProps = {
  open: boolean;
  userId?: number;
  data?: UesrBusinessCardDataType;
  onClose: () => void;
};

export default function CardDrawer({ open, data, onClose }: CardDrawerProps) {
  if (!data) return null;
  const items: DescriptionsProps["items"] = [
    {
      key: "1",
      label: "名片介绍",
      span: 3,
      children: <p>{data.description}</p>,
    },
    {
      key: "2",
      label: "联系方式",
      span: 3,
      children: <p>{data.mobile}</p>,
    },
    {
      key: "3",
      label: "我的报价",
      span: 3,
      children: (
        <Descriptions>
          <Descriptions.Item label="原创图文笔记（报备）" span={2} className="w-1/2">
            <p>{data.officialNotePrice}</p>
          </Descriptions.Item>
          <Descriptions.Item label="原创图文笔记（非报备）" span={2} className="w-1/2">
            <p>{data.notePrice}</p>
          </Descriptions.Item>
          <Descriptions.Item label="原创视频笔记（报备）" span={2} className="w-1/2">
            <p>{data.officialVideoPrice}</p>
          </Descriptions.Item>
          <Descriptions.Item label="原创视频笔记（非报备）" span={2} className="w-1/2">
            <p>{data.videoPrice}</p>
          </Descriptions.Item>
          <Descriptions.Item label="素材直发" span={3}>
            <p>{data.directPostPrice}</p>
          </Descriptions.Item>
        </Descriptions>
      ),
    },
    {
      key: "5",
      label: "收货地址",
      children: <p>{data.shippingAddress}</p>,
    },
  ];

  const renderContent = (item: UesrBusinessCardDataType) => {
    return (
      <div key={item.id}>
        <div className=" text-white mb-2 rounded-t-lg">
          <Flex justify="space-between" align="center">
            <h2 className="bg-black text-lg font-medium py-2 px-4 rounded-md">
              {item.title || `我的小红书名片名称`}
            </h2>
            {item.isDefault && (
              <Tag color="blue" className="flex justify-center items-center m-0">
                默认名片
              </Tag>
            )}
          </Flex>
        </div>
        <Descriptions items={items} />
      </div>
    );
  };

  return (
    <Modal
      open={open}
      closable={false}
      maskClosable={false}
      centered
      footer={null}
      title={
        <Flex justify="space-between" align="center">
          <div>
            <span className="text-bases text-black font-normal mr-2">查看名片</span>
          </div>
          <Button icon={<CloseOutlined />} type="text" size="small" onClick={onClose} />
        </Flex>
      }
      width={680}
    >
      <div className="px-2">{renderContent(data)}</div>
    </Modal>
  );
}
